import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Menu, Icon, Layout} from 'antd';
import u from 'underscore';

import utils from '../../../../utils';
import {LinkWrapper} from '../../../../components';
import {SIDEBAR_CONFIG} from '../../../../constants';

import './index.less';

const {Sider} = Layout;

export default class SideBar extends Component {

    static contextTypes = {
        routes: PropTypes.object
    };

    state = {
        collapsed: false,
    };

    onCollapse = function (collapsed) {
        console.log(collapsed);
        this.setState({collapsed});
    }.bind(this)

    menuState = {
        selectedKeys: [],
        defaultOpenKeys: []
    };

    getMenuState() {
        let pathname = this.props.pathname;
        let {config, parent} = utils.getSidebarConfig(pathname) || {};

        this.menuState.selectedKeys = [config.key];

        if (parent && parent.key) {
            this.menuState.defaultOpenKeys.push(parent.key);
            this.menuState.defaultOpenKeys = u.uniq(this.menuState.defaultOpenKeys);
        }

        return this.menuState;
    }

    render() {
        const collapsed = false;
        const {selectedKeys, defaultOpenKeys} = this.getMenuState();

        return (
            <Sider
                collapsible
                collapsed={this.state.collapsed}
                onCollapse={this.onCollapse}
            >
                <a href="/index" className="logo">{this.state.collapsed ? 'L' : 'Linuxer'}</a>
                <Menu
                    defaultSelectedKeys={selectedKeys}
                    defaultOpenKeys={defaultOpenKeys}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={collapsed}
                >
                {SIDEBAR_CONFIG.navs.map(item => {
                    let menuItem = null;
                    let isSubMenu = item.children && item.children.length;

                    if (isSubMenu) {
                        menuItem = (
                            <Menu.SubMenu
                                key={item.key}
                                title={
                                    <span>
                                        <Icon type={item.icon} />
                                        <span className="title">{item.title}</span>
                                    </span>
                                }
                            >
                            {item.children.map(childItem => (
                                <Menu.Item key={childItem.key}>
                                    <LinkWrapper
                                        to={childItem.url}
                                        className="title"
                                    >
                                        {childItem.title}
                                    </LinkWrapper>
                                </Menu.Item>
                            ))}
                            </Menu.SubMenu>
                        );
                    }
                    else {
                        menuItem = (
                            <Menu.Item key={item.key}>
                                <LinkWrapper to={item.url}>
                                    <Icon type={item.icon} />
                                    <span className="title">{item.title}</span>
                                </LinkWrapper>
                            </Menu.Item>
                        );
                    }

                    return menuItem;
                })}
                </Menu>
            </Sider>
        );
    }
}
